<template>
	<view class="detail-type-page">
		<view class="header">
			<view class="back" @click="back"></view>
			<view class="item-image" :style="{ backgroundImage: 'url(' + jewelryMsg.itemIcon + ')' }"></view>
		</view>
		<view class="jewelryMsg-box">
			<view class="title-name">
				<view class="name">{{jewelryMsg.itemName}}</view>
				<view class="paint-seed">图案模板（paint seed）：564</view>
				<view class="paint-index">皮肤编号（paint index）：911</view>
				<view class="wear" v-if="jewelryMsg.itemExteriorName">磨损：{{jewelryMsg.itemExteriorName}}</view>
			</view>
			<view class="attribute">
				<view class="title">
					属性详情
				</view>
				<view class="lx">
					类型：<span style="color: #5d5d5d;">{{jewelryMsg.itemTypeName}}</span>
				</view>
				<view class="lb">
					类别：<span style="color: #ea4e00;">{{jewelryMsg.itemQualityName}}</span>
				</view>
				<view class="pz">
					品质：<span style="color: #0000ff;">{{jewelryMsg.itemRarityName}}</span>
				</view>
				<view class="wg" v-if="jewelryMsg.itemExteriorName">
					外观：<span style="color:#aa0000;">{{jewelryMsg.itemExteriorName}}</span>
				</view>
				<view class="statTark" v-if="jewelryMsg.itemQualityName=='StatTrak™'">
					<view class="p1">
						该物品具有 StatTrak™ 技术，在其所有者装备时能跟踪若干统计数据。
					</view>
					<view class="p2">
						该物品记录已认证杀敌数。
					</view>
				</view>
				<view class="statTark" v-if="jewelryMsg.itemQualityName=='★ StatTrak™'">
					<view class="p1">
						该物品具有 StatTrak™ 技术，在其所有者装备时能跟踪若干统计数据。
					</view>
					<view class="p2">
						该物品记录已认证杀敌数。
					</view>
				</view>
			</view>
		</view>
		<view class="buy-tool">
			<view class="price">
				售价<span>￥{{jewelryMsg.consultPrice}}</span>
			</view>
			<view class="buy-btn" @click="buy">
				购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	export default {
		data() {
			return {
				jewelryMsg: {},
				jewelryId: "",
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		onLoad(options) {
			this.jewelryId = options.id
			this.getList(this.jewelryId)
		},
		onShow() {
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);
				}).catch(err => {
					console.log(err);
				})
			},
			//获取数据	
			getList(id) {
				http.post('/api/market/jewelry_info', {
					jewelry_id: id
				}).then(res => {
					this.jewelryMsg = res;
				}).catch(err => {

				})
			},
			//返回
			back() {
				let canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack()
				} else {
					history.back();
				}
			},
			//购买
			buy() {
				uni.navigateTo({
					url: "/pages/market/detailType/pay_order/pay_order?id=" + this.jewelryId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.detail-type-page {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);

		.header {
			width: 100%;
			height: 520rpx;
			background-image: radial-gradient(#6b6b6b, #2a2a2a);
			overflow: hidden;

			.back {
				width: 60rpx;
				height: 60rpx;
				margin-top: 30rpx;
				margin-left: 20rpx;
				background-image: url("../../../static/leftArrow_white.svg");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			.item-image {
				width: 80%;
				height: 400rpx;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				margin: auto;
				margin-top: 10rpx;
			}
		}

		.jewelryMsg-box {
			width: 100%;
			height: calc(100% - 640rpx);
			background-color: var(--bg-color);
			overflow-y: scroll;
			color: var(--text-color);

			.title-name {
				width: 100%;
				height: auto;
				background-color: var(--bg-color);
				overflow: hidden;

				>view {
					width: auto;
					margin-left: 20rpx;
					margin-top: 15rpx;
					margin-bottom: 15rpx;
					font-size: 28rpx;
					color: var(--text-color);
				}

				.name {
					font-size: 40rpx;
					font-weight: bold;
					color: var(--text-color);
				}
			}

			.attribute {
				width: 100%;
				height: calc(100% - 270rpx);
				background-color: var(--bg-color);
				margin-top: 40rpx;
				overflow: hidden;

				>view {
					margin-left: 20rpx;
					margin-top: 30rpx;
					color: #787878;
				}

				.title {
					font-size: 40rpx;
					font-weight: bold;
					color: var(--text-color);
				}

				.statTark {
					>view {
						margin-top: 60rpx;
					}

					.p1 {
						color: #55aaff;
					}

					.p2 {
						color: #ea4e00;
					}
				}
			}
		}

		.buy-tool {
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price {
				margin-left: 20rpx;
				color: #787878;
				font-size: 30rpx;
				color: var(--text-color);

				>span {
					font-size: 40rpx;
					color: #ffaa00;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}

			.buy-btn {
				width: 160rpx;
				height: 80rpx;
				background-color: #f69409;
				color: white;
				text-align: center;
				line-height: 80rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>